<style>
    .generate_step_buttom .layui-btn {
        transition: unset;
        -webkit-transition: unset;
    }

    .generate_step_nav {
        padding: 16px 0 10px 0;
        border-bottom: 1px solid #ece9e9;
    }

    .generate_step_buttom {
        height: 53px;
        text-align: center;
        padding: 7px 0px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .generate_step_buttom a:first-child {
        visibility: hidden;
        pointer-events: none;
    }

    .generate_step_buttom a:last-child {
        margin-left: 20px;
    }

    .template_generate_page .generate_step_content {
        background: #ccc;
        overflow: auto;
        height: calc(100% - 134px);
    }

    .template_generate_page {
        height: 100%;
        position: relative;
    }

    .template_generate_page .loading_level {
        display: none;
        position: absolute;
        top: 81px;
        left: 0;
        width: 100%;
        height: calc(100% - 134px);
        background: #00000005;
    }

    .template_generate_page .loading_level i {
        line-height: unset;
        font-size: 38px;
        height: 38px;
        width: 38px;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: #717171;
    }

    .template_generate_page .template_error_info {
        text-align: center;
        color: red;
        width: 400px;
        height: 100px;
        line-height: 100px;
        margin: 20px auto;
        background: #fff;
    }
</style>
<div class="template_generate_page">
    <div class="generate_step_nav"></div>
    <div class="generate_step_content">

    </div>
    <div class="loading_level"><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i></div>
    <div class="generate_step_buttom">
        <a class="layui-btn template-generate-btn-pre" lay-filter="btn-pre-step">上一步</a>
        <a class="layui-btn template-generate-btn-next" lay-filter="btn-next-step">下一步</a>
    </div>
</div>

<script>
    layui.use(['form', 'xStep', 'jquery'], function () {
        var $ = layui.$;
        var form = layui.form;
        var xStep = layui.xStep;
        window.templateNav = {};
        function loadStepPage(url, gid) {
            let $loadLevel = $(".template_generate_page .loading_level");
            let $stepContent = $(".template_generate_page .generate_step_content");
            $.ajax({
                url: url,
                method: 'post',
                data: {
                    template_id: '#(detail.template_id)',
                    generator_id: gid,
                    port: -1
                },
                dataType: 'html',
                beforeSend: function () {
                    $loadLevel.show();
                },
                success: function (str) {
                    $stepContent.html(str);
                },
                complete: function () {
                    $loadLevel.hide();
                }
            });
            return $stepContent;
        }

        let xStepIns = xStep.render({
            elem: ".generate_step_nav",
            stepItems: [{
                id: 'select',
                title: '选择/创建生成器'
            }, {
                id: 'edit',
                title: '编辑代码生成器'
            }, {
                id: 'generate',
                title: '代码生成'
            }],
            // 请求步骤回调
            stepAction: function (item) {
                switch (item.id) {
                    case 'select':
                        loadStepPage('/generator/template/selectGeneratorPage', window.templateNav.generatorId);
                        break;
                    case 'edit':
                        loadStepPage('/generator/template/editGeneratorPage', window.templateNav.generatorId);
                        break;
                    case 'generate':
                        loadStepPage('/generator/template/codeGeneratePage', window.templateNav.generatorId);
                        break;
                }
            }
        });
        let $preBtn = $(".template-generate-btn-pre");
        let $nextBtn = $(".template-generate-btn-next");

        let stepNav = function (type) {
            // 导航回调方法
            window.templateNav.doStepNavCallback = function (status) {
                if (status.success) {
                    if(status.gid) {
                        window.templateNav.generatorId = status.gid
                    }
                    if (type == 'pre') {
                        xStepIns.pre();
                    } else if (type == 'next') {
                        xStepIns.next();
                    }
                    if (xStepIns.hasPre()) {
                        $preBtn.css("visibility", "visible").css("pointer-events", "unset");
                    } else {
                        $preBtn.css("visibility", "hidden").css("pointer-events", "none");
                    }
                    if (xStepIns.hasNext()) {
                        $nextBtn.css("visibility", "visible").css("pointer-events", "unset");
                    } else {
                        $nextBtn.css("visibility", "hidden").css("pointer-events", "none");
                    }
                }
            }
            let currentStep = xStepIns.options.focusIndex;
            // step0，下一步
            if(type == 'next' && currentStep == 0) {
                window.templateNav.generatorId = form.val('create_new_generator_form').generator_id;
            }
            // step1, 下一步
            else if (type == 'next' && currentStep == 1) {
                // 调用代码生成器保存接口前
                $(".template_generate_page .detail_form_footer .layui-btn[lay-filter=btn-generator_model-submit]").click();
                return;
            }
            window.templateNav.doStepNavCallback({success: true});
        };

        $preBtn.click(function () {
            stepNav('pre');
        });
        $nextBtn.click(function () {
            stepNav('next');
        });

    });
</script>